<template>
  <div @contextmenu.prevent="handlerContextmenu">
    <PageWrapper :sidebarWidth="230" :contentFullHeight="true" :fixedHeight="true">
      <vue-office-docx
        v-if="isdocx"
        :src="url"
        @rendered="rendered"
        @error="error"
        style="width: 100%; height: 100%"
      />
      <vue-office-excel
        v-if="isexcel"
        :src="url"
        @rendered="rendered"
        @error="error"
        style="width: 100%; height: 100%"
        :options="{ showContextmenu: true, xls: docType === 'xls' }"
      />
      <PDFViewer
        v-if="ispdf"
        :src="url"
        :width="'100%'"
        :height="'85vh'"
        page-scale="page-fit"
        @loaded="rendered"
      />
      <video v-if="isvideo" :src="url" controls style="width: 100%; height: 100%"></video>
      <img v-if="isimage" :src="url" style="width: 100%; height: 100%" />
      <JsonPreview v-if="docType === 'json'" :data="txtData" style="width: 100%; height: 100%" />
      <MarkDown
        v-if="docType === 'md'"
        v-model:value="txtData"
        ref="markDownRef"
        style="width: 100%; height: 100%"
      />
      <Loading :loading="loading" :absolute="absolute" :tip="tip" />
    </PageWrapper>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, computed, ref, nextTick } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { useMessage } from '/@/hooks/web/useMessage';
  // 引入VueOfficeDocx组件
  import VueOfficeDocx from '@vue-office/docx';
  // 引入相关样式
  import '@vue-office/docx/lib/index.css';
  // 引入VueOfficeExcel组件
  import VueOfficeExcel from '@vue-office/excel';
  // 引入相关样式
  import '@vue-office/excel/lib/index.css';
  // 引入VueOfficePdf组件
  import VueOfficePdf from '@vue-office/pdf';
  import { useQuery } from '/@/hooks/web/usePage';
  import { JsonPreview } from '/@/components/CodeEditor';
  import { Loading } from '/@/components/Loading';
  import { MarkDown } from '/@/components/Markdown';
  import { defHttp } from '/@/utils/http/axios';
  import { decryptRSA } from '/@/utils/encrypt/RSA';
  import { useGlobSetting } from '/@/hooks/setting';
  import PDFViewer from './PDFViewer.vue';
  const { createMessage } = useMessage();
  const { adminPath, ctxAdminPath } = useGlobSetting();

  const query = useQuery();

  const showError = ref(false);

  const url = ref('');
  const docType = ref('');
  const docTypes = ['docx'];
  const excelTypes = ['xls', 'xlsx'];
  const pdfTypes = ['pdf', 'ppt', 'pptx', 'doc'];
  const videoTypes = ['mp4', 'avi', 'rmvb', 'wmv'];
  const imageTypes = ['jpg', 'png', 'gif', 'bmp'];
  const txtData = ref('');

  const isdocx = computed(() => {
    return docTypes.includes(docType.value || '');
  });
  const ispdf = computed(() => {
    return pdfTypes.includes(docType.value || '');
  });
  const isexcel = computed(() => {
    return excelTypes.includes(docType.value || '');
  });
  const isimage = computed(() => {
    return imageTypes.includes(docType.value || '');
  });
  const isvideo = computed(() => {
    return videoTypes.includes(docType.value || '');
  });
  const rendered = () => {
    console.log('渲染完成');
    loading.value = false;
  };
  const error = () => {
    createMessage.error('预览失败，文件不存在或者无权限 ！');
    loading.value = false;
  };

  let loading = ref(false);
  let absolute = ref(false);
  let tip = ref('加载中...');

  onMounted(async () => {
    const params = decryptRSA(query.value.params);
    if (params === 'false') {
      createMessage.error('参数解析失败请刷新后重试！');
      return;
    }

    loading.value = true;
    // const resData = await pLMDocInfo(JSON.parse(params));
    const docInfo = JSON.parse(params);
    var fileUrl = `/plm/file/view?docCode=${docInfo.docCode}&docVer=${docInfo.docVer}&docType=${docInfo.docType}&bviewPdf=${docInfo.bviewPdf}`;
    url.value = ctxAdminPath + fileUrl;

    docType.value = docInfo.docType;
    if ('md' === docInfo.docType || 'json' === docInfo.docType) {
      defHttp
        .get({
          url: adminPath + fileUrl,
        })
        .then((res) => {
          console.log('res', res);
          txtData.value = res;
          loading.value = false;
        });
    }
  });

  function handlerContextmenu(e: PointerEvent) {
    e.preventDefault();
  }
</script>
<style>
  /* .download-button {
    display: none !important;
  }
  .print-button {
    display: none !important;
  }
  .open-file {
    display: none !important;
  }
  .bookmark-button {
    display: none !important;
  }
  .toolbar {
    position: relative;
    left: 0;
    right: 0;
    z-index: 1;
    cursor: default;
  } */
</style>
